<template>
	<GlobalPanel v-if="globalPanel" />
	<view class="nav-header" :style="{borderBottom:showBorder && '1px solid #f1f1f1' || 'none'}">
		<!-- #ifndef APP-PLUS -->
		<up-navbar :auto-back="false" title-width="200" placeholder :title="showTitle ? title : ''"
			rightIcon="more-dot-fill" :bgColor="bgColor" :fixed="fixed" :titleStyle="titleStyle">
		<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<up-navbar :auto-back="false" title-width="200" :placeholder="true" :title="showTitle ? title : ''"
				rightIcon="more-dot-fill" :bgColor="bgColor" :titleStyle="titleStyle">
			<!-- #endif -->
				<template v-slot:left>
					<view class="left">
						<slot name="left">
							<svg-icon icon="arrowLeft" @tap="onNavBack()" v-if="showLeft"></svg-icon>
							<!-- <uni-icons class="back" v-if="showLeft" type="back" :color="leftIconColor" size="28"
							@tap="onNavBack()"></uni-icons> -->
							<view v-else></view>
						</slot>
					</view>
				</template>
				<template v-slot:right>
					<slot name="right">
						<svg-icon :icon="rightIcon" v-if="showRight" class="menu"
							@tap.stop.native="onShowMore()"></svg-icon>
						<view v-else></view>
					</slot>
				</template>
			</up-navbar>
	</view>
</template>

<script>
	import GlobalPanel from '../global-panel/global-panel.vue'
	export default {
		components: {
			GlobalPanel
		},
		props: {
			/**
			 * 去除微信小程序自带导航栏后要不要生成一个90rpx的定格
			 */
			customNav: {
				type: Boolean,
				default: false
			},
			fontSize: {
				type: [String, Number],
				default: 18
			},
			globalPanel: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ""
			},
			showTitle: {
				type: Boolean,
				default: true
			},
			showLeft: {
				type: Boolean,
				default: true
			},
			showRight: {
				type: Boolean,
				default: true
			},
			/**
			 * 固定顶部并生成一个等高的盒子
			 */
			fixed: {
				type: Boolean,
				default: true
			},
			rightIcon: {
				type: String,
				default: "more"
			},
			leftIconColor: {
				type: String,
				default: "#000000" //#1989FA
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			titleColor: {
				type: String,
				default: ''
			},
			showBorder: {
				type: Boolean,
				default: true
			}
		},
		emits: ["onShowMore", "onNavBack"],
		data() {
			return {
				customNavHeight: 0,
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.customNavHeight = uni.getMenuButtonBoundingClientRect().height
			// #endif
		},
		methods: {
			onNavBack() {
				if (getCurrentPages().length == 1) {
					uni.switchTab({
						url: "/pages/tabbar/chat"
					})
					return
				}
				// #ifndef H5
				uni.navigateBack({
					delta: 1,
				})
				// #endif
				// #ifdef H5
				history.back()
				// #endif
				this.$emit("onNavBack")
			},
			onShowMore() {
				this.$emit("onShowMore")
			},
		},
		computed: {
			titleStyle() {
				return {
					color: this.titleColor,
					fontSize: this.fontSize + 'px',
					fontWeight: "500"
				}
			}
		}
	}
</script>